<template>
  <div class="new-box">
    <div class="boxs">
      <h2>消息</h2>
      <div>
        <span>
          <router-link to="chat">

            <img
              src="./magimg/tongx.png"
              alt=""
            >
          </router-link>
        </span>
        <span class="popup">
          <img
            is-link
            title=""
            @click="show = true"
            src="./magimg/tianjia.png"
            alt=""
          >
          <!-- <van-cell is-link @click="showPopup"></van-cell> -->
        </span>
      </div>
    </div>

    <!-- <router-link to="mssg">1234</router-link> -->
    <!-- <router-view/> -->
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="list">
          <ul>
            <li>
              <div class="imag">
                <img
                  src="../../assets/img/news/消息-一级页面_slices/p1.png"
                  alt=""
                >
              </div>
              <div class="tex">
                <div class="nam-n">
                  <h4>琪琪</h4>
                  <span>一小时前</span>
                </div>
                <div class="cont">
                  <h4>嗨，我是琪琪</h4>
                  <span>1</span>
                </div>
              </div>
            </li>
            <li>
              <div class="imag">
                <img
                  src="../../assets/img/news/消息-一级页面_slices/p2.png"
                  alt=""
                >
              </div>
              <div class="tex">
                <div class="nam-n">
                  <h4>J.</h4>
                  <span>6小时前</span>
                </div>
                <div class="cont">
                  <h4>嗯嗯</h4>
                  <span>1</span>
                </div>
              </div>
            </li>
            <li>
              <div class="imag">
                <img
                  src="../../assets/img/news/消息-一级页面_slices/p3.png"
                  alt=""
                >
              </div>
              <div class="tex">
                <div class="nam-n">
                  <h4>错过</h4>
                  <span>1天前</span>
                </div>
                <div class="cont">
                  <h4>你哪的</h4>
                  <span>1</span>
                </div>
              </div>
            </li>
            <li>
              <div class="imag">
                <img
                  src="../../assets/img/news/消息-一级页面_slices/p4.png"
                  alt=""
                >
              </div>
              <div class="tex">
                <div class="nam-n">
                  <h4>伤</h4>
                  <span>5天前</span>
                </div>
                <div class="cont">
                  <h4>hello</h4>
                  <span>1</span>
                </div>
              </div>
            </li>
            <li>
              <div class="imag">
                <img
                  src="../../assets/img/news/消息-一级页面_slices/p5.png"
                  alt=""
                >
              </div>
              <div class="tex">
                <div class="nam-n">
                  <h4>贝塔</h4>
                  <span>1周前</span>
                </div>
                <div class="cont">
                  <h4>不客气</h4>
                  <!-- <span>1</span> -->
                </div>
              </div>
            </li>
            <li>
              <div class="imag">
                <img
                  src="../../assets/img/news/消息-一级页面_slices/p6.png"
                  alt=""
                >
              </div>
              <div class="tex">
                <div class="nam-n">
                  <h4>miracle</h4>
                  <span>06-25</span>
                </div>
                <div class="cont">
                  <h4>好的</h4>
                  <!-- <span>1</span> -->
                </div>
              </div>
            </li>
            <li>
              <div class="imag bac">
                <img
                  class="image"
                  src="../../assets/img/news/消息-一级页面_slices/laba.png"
                  alt=""
                >
              </div>
              <div class="tex">
                <div class="nam-n">
                  <h4>系统通知&nbsp;&nbsp;<span>官方</span></h4>
                  <span>1周前</span>
                </div>
                <div class="cont">
                  <h4>由于你在14:28离线并自动退出苏小歌的房间...</h4>
                  <!-- <span>1</span> -->
                </div>
              </div>
            </li>
            
           
            
            <li>
              <div class="imag">
                <img
                  src="./magimg/tx1.png"
                  alt=""
                >
              </div>
              <div class="tex">
                <div class="nam-n">
                  <h4>琪琪</h4>
                  <span>一小时前</span>
                </div>
                <div class="cont">
                  <h4>嗨，我是琪琪</h4>
                  <span>1</span>
                </div>
              </div>
            </li>

          </ul>
        </div>
      </van-list>
    </van-pull-refresh>

    <!--  <van-popup v-model="show" position="bottom" click-overlay closeable>
    <div class="t-top">
        <h4>选择操作</h4>
        <p>发起群聊</p>
        <p>发起群聊</p>
        <p>发起群聊</p>
    </div>
    <div class="t-bot" >
        <p>取消</p>
    </div>
    </van-popup> -->

    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
    />

  </div>
  <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
  <p>刷新次数: {{ count }}</p>
</van-pull-refresh> -->

</template>

<script>
export default {
  data() {
    return {
      list: [],
      show: false,
      loading: false,
      finished: false,
      refreshing: false,
      actions: [
        { name: "选择操作" },
        { name: "发起群聊" },
        { name: "发起群聊" },
        { name: "发起群聊" },
      ],
    };
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false;

        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    showPopup() {
      this.show = true;
    },
    clock() {
      console.log(123);
    },
    onCancel() {
      Toast("取消");
    },
    //  挂载弹出层位置
  },
};
</script>

<style lang="scss" scoped>
//  弹出层展示框
.van-action-sheet__cancel,
.van-action-sheet__item {
  font-size: 30px;
}
.van-action-sheet__item {
  height: 75px;
}

.new-box {
  color: white;
  .boxs {
    width: 90%;
    height: 54px;
    margin: 0 auto;
    margin-top: 30px;
    // background-color: rgb(209, 138, 46);
    display: flex;
    justify-content: space-between;
    h2 {
      line-height: 54px;
      font-size: 44px;
    }
    div {
      display: flex;
      align-items: center;
      vertical-align: middle;
      .popup {
        background-color: black;
      }
      span {
        // height: 100%;
        display: inline-block;
        width: 33px;
        height: 33px;
        // line-height: 33px;
        margin: 0 10px;
        img {
          vertical-align: middle;
          width: 33px;
          height: 33px;
          //   margin: 0  10px;
        }
      }
    }
  }
  .list {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    margin-top: 50px;

    li {
      width: 100%;
      height: 96px;
      margin: 40px 0;
      //   background-color: aquamarine;
      display: flex;
      //    justify-content: space-around;
      .bac {
        background-color: #a196f7;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        .image {
          width: 48px;
          height: 48px;
        }
      }
      .imag {
        width: 96px;
        height: 96px;
        img {
          width: 96px;
          height: 96px;
        }
      }
      .tex {
        width: 90%;
        height: 96px;
        // background-color: blueviolet;
        display: flex;
        // flex: 1;
        flex-flow: column;
        .nam-n {
          width: 100%;
          height: 48px;
          //   background-color: brown;
          display: flex;
          justify-content: space-between;

          h4 {
            text-indent: 30px;
            font-size: 30px;
            line-height: 48px;
            span {
                // width: 50px;
                display: inline;
                padding: 7px;
                font-size: 22px;
                line-height: 20px;
                color: white;
                text-align: center;
              background: linear-gradient(45deg, #ecb643 37%, #ffee9a 100%);
              border-radius: 14px 14px 14px 0px;
            }
          }

          span {
            font-size: 20px;
            display: inline-block;
            // transform: scale(0.75);
            color: #999999;
            line-height: 48px;
          }
        }
        .cont {
          width: 100%;
          height: 48px;
          //   background-color: darkmagenta;
          display: flex;
          justify-content: space-between;

          h4 {
            text-indent: 30px;
            font-size: 24px;
            // line-height: .24rem;
            color: #999999;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          span {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background-color: #ff4242;
            font-size: 26px;
            display: inline-block;
            // transform: scale(0.6);
            color: white;
            line-height: 26px;

            text-align: center;
          }
        }
      }
    }
  }
}
</style>
